{% import "_includes/forms" as forms %}

<div id="site" class="screen hidden" data-inputs="name,baseUrl,language">
    <div class="icon" aria-hidden="true">{{ svg(worldIcon, sanitize=false) }}</div>
    <h1>{{ "Setup your site"|t('app') }}</h1>

    <form accept-charset="UTF-8">
        {{ csrfInput() }}

        {{ forms.textField({
            first: true,
            label: "System Name"|t('app'),
            id: 'site-name',
            value: defaultSystemName,
            maxlength: 255
        }) }}

        {{ forms.autosuggestField({
            label: "Base URL"|t('app'),
            id: 'site-baseUrl',
            class: 'ltr',
            suggestions: craft.cp.getEnvSuggestions(true),
            value: defaultSiteUrl
        }) }}

        {% set languageInput %}
            <div class="select">
                <select id="site-language">
                    {% for locale in craft.app.i18n.getAllLocales() %}
                        <option value="{{ locale.id }}"{% if locale.id == defaultSiteLanguage %} selected{% endif %}>{{ locale.id }} ({{ locale.getDisplayName(craft.app.language) }})</option>
                    {% endfor %}
                </select>
            </div>
        {% endset %}
        {{ forms.field({
            label: "Language"|t('app'),
            id: 'site-language'
        }, languageInput) }}

        <div class="buttons">
            <button type="submit" class="btn big submit">{{ "Finish up"|t('app') }}</button>
        </div>
    </form>
</div>
